<template>
  <fieldset class="legend">
    <legend class="legendTitle">
      <span @click="changeExpand" style="display: flex;align-items: center;" :style="hasDefaultSlot?'cursor: pointer;':''">
          <i v-if="props.icon" :class="props.icon" style="margin: 0 5px;"> </i>
          {{props.title}}
          <i v-if="hasDefaultSlot" :class="expand?'h-icon-triangle-up':'h-icon-triangle-down'" class="legendIcon" style="font-size: .5rem;"/>
      </span>
      <span v-if="hasRightSlot" style="flex:1;text-align: right"><slot name="right"/></span>
    </legend>
    <div class="legend-content" :class="{collapse:!expand}">
      <slot/>
    </div>
  </fieldset>
</template>
<script setup>
  import {onMounted,getCurrentInstance,useSlots,ref} from 'vue'
  const slots=useSlots();
  const hasDefaultSlot = slots.default
  const hasRightSlot = slots.right
  const expand=ref(true)
  const props= defineProps({
    title:String,
    icon:String
  })

  const emit=defineEmits(['legend'])
  const current=getCurrentInstance()

  onMounted(()=>{
    let el=current.vnode.el;
    el.dispatchEvent(new CustomEvent('legend',{detail:{
        key:current.uid,
        title:props.title,
        icon:props.icon,
        el:el
      }}))
  })
  function changeExpand(){
    expand.value=!expand.value
  }
</script>
<style>
  .filed-group fieldset{
    border-width: 1px 0 0;
    padding-left: 1rem;
    border-color: #eee;
    width: 100%;
  }
  .filed-group fieldset legend{
    padding: 20px 0;
    font-size: 1.3rem;
    font-family: tahoma, 微软雅黑;
    user-select: none;
    width: 100%;
  }
  .legend-content{

  }
  .legend .collapse{
    height: 0;
    overflow-y: hidden;
  }
  .legendTitle{
    /*position: relative;*/
    display: flex;
    align-items: center;
  }
  .legendIcon{
    /*position: absolute;*/
    /*top: 50%;*/
    /*right: 0;*/
    margin-left: 4px;
  }
</style>
